<template>
  <div class="layout">
    <!-- 顶栏 -->
    	<el-container style="position: absolute;top:0;left: 0;bottom: 0;right:0;">
    <el-header>
      <div class="nav">
        <div class="left">
          <h3 class="iconfont icon-niu niu" @click="change"></h3>
          <h1>水牛后台</h1>
        </div>
        <div class="right">
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item
              :index="index + ''"
              v-for="(item, index) in navBar.list"
              :key="index"
            >
              {{ item.name }}
            </el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">
                <el-avatar :size="30" :src="circleUrl"></el-avatar>
                <span class="user">吴亦凡</span>
              </template>
              <el-menu-item index="100-1">修改</el-menu-item>
              <el-menu-item index="100-2">退出</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </div>
    </el-header>
    <el-container style="height: 100%;">
      <!-- 侧边栏 -->
      <el-aside style="width:200px">
        <el-row>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#fff"
            text-color="#333"
            active-text-color="#008080"
            :collapse="isCollapse"
            :collapse-transition="false"
            :unique-opened="true"
            router
          >
            <!-- 单层菜单 -->
            <el-menu-item
              :index="'' + child.pathname"
              v-for="child in no"
              :key="child.id"
            >
              <i :class="child.icon"></i>
              <span>{{ child.name }}</span>
            </el-menu-item>
            <!-- 双层菜单 -->
            <el-submenu
              :index="'' + child.pathname"
              v-for="child in has"
              :key="child.id"
            >
              <template slot="title">
                <i :class="child.icon"></i>
                <span>{{ child.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="'' + children.pathname"
                  v-for="children in child.children"
                  :key="children.id"
                >
                  <i :class="children.icon"></i>
                  {{ children.name }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-row>
      </el-aside>
      <!-- 内容 -->
      <el-main style="position: relative; " class="bg-light">
        <!-- 面包屑导航 -->
        <div
          class="border-bottom mb-3 bg-white"
          style="padding: 20px; margin: -20px;"
          v-if="bron.length > 0"
        >
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(item, index) in bron"
              :key="index"
              :to="{ path: item.path }"
            >
              {{ item.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <router-view></router-view>
      </el-main>
    </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'layout',
  data() {
    return {
      bron: [],
      isCollapse: false,
      activeIndex2: '0',
      circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      navBar: {
        active: '0',
        list: [
          {
            id: 0,
            name: '首页',
            subActive: '0',
            submenu: [
              {
                id: 101,
                icon: 'el-icon-s-home',
                name: '后台首页',
                pathname: 'index',
              },
              {
                id: 102,
                icon: 'el-icon-picture',
                name: '相册管理',
                pathname: 'image',
              },
              {
                id: 103,
                icon: 'el-icon-s-claim',
                name: '商品列表',
                children: [
                  {
                    id: 191,
                    icon: 'el-icon-s-flag',
                    name: '商品管理',
                    pathname: 'shop_goods_list',
                  },
                  {
                    id: 192,
                    icon: 'el-icon-s-opportunity',
                    name: '商品分类',
                    pathname: 'shop_category_style',
                  },
                ],
              },
            ],
          },
          {
            id: 111,
            name: '商品',
            subActive: '0',
            submenu: [
              {
                id: 112,
                icon: 'el-icon-s-claim',
                name: '商品列表',
                pathname: 'shop_goods_list',
              },
              {
                id: 113,
                icon: 'el-icon-s-help',
                name: '分类列表',
                pathname: 'shop_category_list',
              },
              {
                id: 114,
                icon: 'el-icon-s-help',
                name: '商品规格',
                pathname: 'shop_sku_list',
              },
              {
                id: 115,
                icon: 'el-icon-s-help',
                name: '商品类型',
                pathname: 'shop_type_list',
              },
              {
                id: 116,
                icon: 'el-icon-s-help',
                name: '商品评论',
                pathname: 'shop_comment_list',
              },
            ],
          },
          {
            id: 122,
            name: '订单',
            subActive: '0',
            submenu: [
              {
                id: 123,
                icon: 'el-icon-s-claim',
                name: '订单管理',
                pathname: 'order_order_list',
              },
              {
                id: 124,
                icon: 'el-icon-s-claim',
                name: '发票管理',
                pathname: 'order_invoice_list',
              },
              {
                id: 125,
                icon: 'el-icon-s-claim',
                name: '售后服务',
                pathname: 'order_after-sale_list',
              },
            ],
          },
          {
            id: 131,
            name: '会员',
            subActive: '0',
            submenu: [
              {
                id: 132,
                icon: 'el-icon-s-claim',
                name: '会员列表',
                pathname: 'user_user-list_list',
              },
              {
                id: 133,
                icon: 'el-icon-s-claim',
                name: '会员等级',
                pathname: 'user_user-level_list',
              },
            ],
          },
          {
            id: 141,
            name: '设置',
            subActive: '0',
            submenu: [
              {
                id: 142,
                icon: 'el-icon-s-claim',
                name: '基础设置',
                pathname: 'set_base',
              },
              {
                id: 143,
                icon: 'el-icon-s-claim',
                name: '物流设置',
                pathname: 'set_express',
              },
              {
                id: 144,
                icon: 'el-icon-s-claim',
                name: '管理员管理',
                pathname: 'set_manager',
              },
              {
                id: 145,
                icon: 'el-icon-s-claim',
                name: '交易设置',
                pathname: 'set_payment',
              },
            ],
          },
        ],
      },
    }
  },
  watch: {
    /* '$route'(to, from) {
			
				localStorage.setItem('navActive',JSON.stringify({
					top:this.navBar.active || '0',
					left:this.slideMenuActive || '0'
				})) 
				this.getRouterBran()
			} */
    $route(to, from) {
      /* console.log(to)
				console.log(from) */
      localStorage.setItem(
        'navActive',
        JSON.stringify({
          top: this.navBar.active || '0',
          left: this.slideMenuActive,
        }),
      )

      this.getRouterBran()
    },
  },
  created() {
    this.getRouterBran()
    this.__initNavBar()
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      this.navBar.active = key
    },
    change() {
      this.isCollapse = !this.isCollapse
    },
    //存储路由
    __initNavBar() {
      let r = localStorage.getItem('navActive')
      if (r) {
        r = JSON.parse(r)
        this.navBar.active = r.top
        this.slideMenuActive = r.left
      }
    },
    // 获取面包屑导航
    getRouterBran() {
      console.log(this.$route)
      let b = this.$route.matched.filter((v) => v.name)
      let arr = []
      b.forEach((v) => {
        if (v.name === 'index' || v.name === 'layout') return
        arr.push({
          name: v.name,
          path: v.path,
          title: v.meta.title,
        })
      })
      if (arr.length > 0) {
        arr.unshift({
          name: 'index',
          path: '/layout',
          title: '后台首页',
        })
      }
      this.bron = arr
    },
  },
  computed: {
    slidemenu() {
      let item = this.navBar.list[this.navBar.active]
      return item ? item.submenu : []
    },
    // 过滤 单层双层数据
    no() {
      return this.slidemenu.filter((child) => !child.children)
    },
    has() {
      return this.slidemenu.filter((child) => child.children)
    },
  },
}
</script>

<style>
.el-header {
  width: 100%;
  height: 60px;
  background-color: #545c64;
  color: #333;
  text-align: center;
}
.nav {
  display: flex;
  justify-content: space-between;
}
.niu {
  margin-left: 20px;
  font-size: 60px;
  color: #ffffff;
  line-height: 60px;
}
.left {
  display: flex;
}
.left h1 {
  display: inline-block;
  height: 60px;
  line-height: 60px;
  margin-left: 10px;
  color: #ffffff;
}
.user {
  margin: 0 0 0 4px;
}
.bg-purple {
  background-color: #fff;
  border: 1px solid #efefef;
}

.grid-content {
  border-radius: 2px;
  min-height: 88px;
}
.grid-main {
  margin-top: 30px;
  border-radius: 2px;
  min-height: 300px;
}
.grid-center1 {
  margin-top: 30px;
  border-radius: 2px;
  min-height: 130px;
}
.grid-center2 {
  margin-top: 38px;
  border-radius: 2px;
  min-height: 130px;
}
</style>
